// Hide element on all screens
.hide {
    display: none;
}

// Hide element on very small screen and down
@media #{$xsmall-and-down} {
    .hide-xs {
        display: none;
    }
}

// Hide element on small screen only
@media #{$small-only} {
    .hide-sm {
        display: none;
    }
}

// Hide element on medium screen only
@media #{$medium-only} {
    .hide-md {
        display: none;
    }
}

// Hide element on large screen and up
@media #{$large-and-up} {
    .hide-lg {
        display: none;
    }
}